<template>
  <IndependenceForm ref="form" :submit-fun="submitFun">
    <page-region title="基础数据">
      <m-single-form v-model="baseData" v-bind="baseFormInfo" />
    </page-region>
    <page-region title="商品参数">
      <ProductParam />
    </page-region>
    <page-region title="销售属性">
      <ProductAttr v-model="attrData" />
    </page-region>
    <page-region title="商品规格">
      <ProductSpec :attr-data="attrData" :base-data="baseData" />
    </page-region>
  </IndependenceForm>
</template>
<script setup lang="ts">
import {
  MIndependenceForm as IndependenceForm,
  MPageRegion as PageRegion,
  MSingleForm,
  type SingleFormProps
} from "page-com";
import { shallowReactive, useTemplateRef, ref } from "vue";
import { addProduct } from "@/api/product/productApi";
import { DialogSubmitFormInstance } from "page-com";
import { successMsg } from "@/utils/message";
import { getBrandSelect } from "@/api/product/brandApi";
import { getCategoryTree } from "@/api/product/categoryApi";
import ProductAttr from "./ProductAttr.vue";
import ProductSpec from "./ProductSpec.vue";
import ProductParam from "./ProductParam.vue";
const attrData = ref<ShopProductAttrAddVo[]>([]);
const form = useTemplateRef("form");
const baseData = ref({});
async function submitFun(data) {
  let res = await addProduct(data);
  if (res.code == RESPONSE_CODE.SUCCESS) {
    successMsg("添加成功");
    form.value.goBack();
  }
}
const baseFormInfo = shallowReactive<Partial<SingleFormProps>>({
  items: [
    {
      frameType: "input",
      key: "productName",
      label: "物品名称",
      validations: {
        required: true
      }
    },
    {
      frameType: "input",
      key: "productDesc",
      label: "物品描述"
    },
    {
      frameType: "select",
      key: "brandId",
      label: "品牌",
      options: getBrandSelect().then(v => v.data),
      validations: {
        required: true
      }
    },
    {
      frameType: "cascader",
      key: "categoryId",
      label: "分类",
      cascaderOptions: getCategoryTree().then(v => v.data),
      props: {
        multiple: true
      },
      validations: {
        required: true
      }
    }
  ]
});
</script>
